'use strict'
import React, { Component } from 'react';
import PropTypes from "prop-types";
import Label from '../label/index';
import Color from '../../config/theme/standard/color';
import Fontsize from '../../config/theme/standard/fonts';


import {getMessageBoxStyle} from './MessageBoxStyle';
import Variables from '../../config/theme/styles/index';

import {
    View,
    TextInput,
    TouchableOpacity,
    StyleSheet,
    ScrollView,
    TouchableHighlight,
    Image,
    Platform,
    Text,
    WebView,
    Dimensions
} from 'react-native';

const BaseScriptIOS =
    `
    (function () {
        var height = null;
        function changeHeight() {
          if (document.body.scrollHeight != height) {
            height = document.body.scrollHeight;
            width = document.body.scrollWidth;
            if (window.ReactNativeWebView) {
                window.ReactNativeWebView.postMessage(JSON.stringify({
                type: 'setHeight',
                height: height,
                width:width,
              }))
            }else{
                window.postMessage(JSON.stringify({
                type: 'setHeight',
                height: height,
                width:width,
              }))
            }
          }
        }
        setInterval(changeHeight, 100);
    } ())
    `

const BaseScriptAndroid =
    `
    (function () {
        var height = null;
        function changeHeight() {
          if (document.body.offsetHeight != height) {
            height = document.body.offsetHeight;
            width = document.body.offsetWidth;
            if (window.ReactNativeWebView) {
                window.ReactNativeWebView.postMessage(JSON.stringify({
                type: 'setHeight',
                height: height+10,
                width:width,
              }))
            }else{
                window.postMessage(JSON.stringify({
                type: 'setHeight',
                height: height+10,
                width:width,
              }))
            }
          }
        }
        setInterval(changeHeight, 100);
    } ())
    `


const { height } = Dimensions.get('window');
class MessageBoxContainer extends Component {
    static displayName = 'MessageBoxContainer';

    constructor(props) {
        super(props);
        this.state = {
            prevPropsVisible: this.props.visible,
            visible: this.props.visible,
            text: props.defaultValue1 ? props.defaultValue1 : '',
            password: props.defaultValue2 ? props.defaultValue2 : '',
            viewMiddleHeight: props.viewHeight,
            viewMiddleWidth: props.viewHeight,
            layoutHeight: 0,
            close: false,
            heightView: 0,
            isReady: false,
            isWideScreen: false // 鸿蒙适配是否宽屏
        };
    };
    componentDidMount() {
        // 适配鸿蒙折叠屏动态更新组件
        Dimensions.addEventListener('change', () => {
            const screenWidth = Dimensions.get('window').width;
            this.setState({
                isWideScreen: screenWidth > 500 && screenWidth < 800
            })
        })
    }
 
    static getDerivedStateFromProps(nextProps, prevState) {
        if (('visible' in nextProps) && (nextProps.visible !== prevState.prevPropsVisible)) {
            return {
                prevPropsVisible: nextProps.visible,
                visible: nextProps.visible,
            };
        }
        return null;
    }

    _handlerMessagebox = (type) => {
        if (type) {
            if (this.props.htmlStr || this.props.htmlUrl) {
                if (this.state.isReady) {
                    return {
                        backgroundColor: 'transparent'
                    }
                }
                return null
            }
        }
        if (this.props.htmlStr || this.props.htmlUrl) {
            if (this.state.isReady) {
                return null
            }
            if (!this.state.isReady) {
                return {
                    height: 0,
                    overflow: "hidden"
                }
            }
            return null
        }
    }

    /**
     * web端发送过来的交互消息
     */
    onMessage(event) {
        try {
            const action = JSON.parse(event.nativeEvent.data)
            if (action.type === 'setHeight' && action.height > 0) {
                this.setState({
                    viewMiddleHeight: action.height,
                    heightView: action.height,
                    isReady: true
                })
             
            }
        } catch (error) {
            // pass
        }
    }
    onLayout = (height) => {
        this.setState({
            layoutHeight: height,
            close : true
        })
    }

    heightFixDetailComponent = (detailComponent) => {
        if (this.props.alertType === 2) {
            const midView = (
                <View onLayout={(e) => { this.onLayout(e.nativeEvent.layout.height) }} style={{width: '100%'}} >
                    {detailComponent}
                </View>
            )
            return (
                <View style={{ maxHeight: height*0.8-48-50,width: '100%' }}>
                    {
                        this.state.layoutHeight >= height*0.8-48-50-1 ?
                            <ScrollView style={{ height:  height*0.8-48-50,width: '100%' }}>
                                { midView }
                            </ScrollView>
                            : 
                            midView
                    }
                </View>
            )
        } else {
            return detailComponent
        }
    }

    _renderText = () => {
        let { styles } = getMessageBoxStyle(Variables);
        const detailTextStyle = [styles.detailText];
        const boxWidth = this.props.boxWidth || Dimensions.get('window').width * 0.912
        if (this.props.alertType === 1 || this.props.alertType === 2 || this.props.alertType === 4 || this.props.alertType === 5) {

            detailTextStyle.push({ marginHorizontal: 20,lineHeight: 22})
            detailTextStyle.push({ marginTop: 4, marginBottom: 20 })
        }
        if (!this.props.hasTitle) {
            detailTextStyle.push({ marginTop: 20 })
        }

        let scalesPageToFit = true;
        if (Platform.OS === 'ios') {
            scalesPageToFit = false;
        }

        let boxhidden ;
        boxhidden = (
            <View style={{position:'absolute',left:0 ,top:0,opacity:0,zIndex:-100}}  onLayout={(e) => { this.props.alertType == 1 && this.onLayout(e.nativeEvent.layout.height) }} >
                <Label text={this.props.detailText} labelStyle={[detailTextStyle, this.props.detailTextStyle]} />
            </View>
        )
        if (this.props.htmlStr) {
            let html = `<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scale=no;' /></head>${this.props.htmlStr}</html>`;
            let source = Platform.OS === 'android' ? { html: html, baseUrl: '' } : { html: html }
            return (
                <WebView style={[styles.webViewStyle, { height: this.state.viewMiddleHeight, width: this.state.viewMiddleWidth }]}
                    source={source}
                    injectedJavaScript={Platform.OS === 'android' ? BaseScriptAndroid : BaseScriptIOS}
                    scalesPageToFit={scalesPageToFit}
                    onMessage={this.onMessage.bind(this)}
                >
                </WebView>
            )
        }
        if (this.props.htmlUrl) {
            return (
                <WebView style={[styles.webViewStyle, { height: this.state.viewMiddleHeight, width: this.state.viewMiddleWidth }]}
                    source={this.props.htmlUrl}
                    injectedJavaScript={Platform.OS === 'android' ? BaseScriptAndroid : BaseScriptIOS}
                    scalesPageToFit={scalesPageToFit}
                    onMessage={this.onMessage.bind(this)}
                ></WebView>

            )
        }
        if (this.props.detailText) {
           
            if (Platform.OS === 'web') {
                return (
                    <View style={{ flexShrink: 1, width: boxWidth, padding: 20, paddingTop: this.props.hasTitle ? 4 : 20 }}>
                        <Text style={[{ flexWrap: 'wrap', color: Color.messageBox.content, fontSize: Fontsize.messageBox.contentFontSize }, this.props.detailTextStyle]}>{this.props.detailText}</Text>
                    </View>
                )
            } else {
                return (
                    <View style={[this.props.alertType === 1 && {
                        maxHeight: height * 0.8 - 48 - 50
                    }, { position: 'relative' }]} >
                        {
                            (this.props.alertType === 1 && this.state.layoutHeight >= height * 0.8 - 48 - 50 - 1) ?
                                <ScrollView style={{ height: height * 0.8 - 48 - 50 }}>
                                    <Label text={this.props.detailText} labelStyle={[detailTextStyle, this.props.detailTextStyle]} />
                                </ScrollView>
                                : 
                                <Label text={this.props.detailText} labelStyle={[detailTextStyle, this.props.detailTextStyle]} />
                               
                        }
                        {(this.props.alertType === 1 && (this.state.layoutHeight <  height*0.8-48-50-1 || !this.state.close)) ? boxhidden : null}
                    </View>
                )
            }
        }
        return null;
    };

    _open = () => {
        this.setState({
            visible: true,
        });
    }

    _close = () => {
        this.setState({
            visible: false,
            layoutHeight: 0
        });
    }

    _onClose = () => {
        this.setState({
            visible: false,
            layoutHeight: 0
        });
        this.props.destroy();
        this.props.onClose()
    }

    _onConfirm = () => {
        this.setState({
            visible: false,
        });
        this.props.destroy();
        this.props.onConfirm()
    }

    _onChangeText = (type, value) => {
        this.setState({
            [type]: value,
        });
    }
    _inputConfirmLogin = (name, password) => {
        this.props.onConfirm(name, password);
    }
    _inputConfirmText = (text) => {
        this.props.onConfirm(text);
    }

    _onMiddleLayout = (event) => {
        let height = event.nativeEvent.layout.height
        let width = event.nativeEvent.layout.width

        this.setState({
            viewMiddleHeight: height,
            viewMiddleWidth: width,
        });
    }

    _maskOnPress = () => {
        if (this.props.maskOnPress) {
            this.props.maskOnPress();
        }
    }

    render() {
        if (!this.state.visible) {
            return null;
        }
        let { styles , messageBoxStyle} = getMessageBoxStyle(Variables);
        const {
            showType, alertType, type, placeholder1, placeholder2, title, titleTextStyle, buttonText,
            buttonTextOne, buttonTextTwo, buttonTextThree, buttonTextStyle, detailTextAlign,
            footerLeftText, footerLeftTextStyle, footerRightText, footerRightTextStyle, containerStyle, hasTitle, detailComponent,detailTextStyle,heightType
        } = this.props
        const { text, password } = this.state
        const boxWidth = this.props.boxWidth || Dimensions.get('window').width * 0.912
        const modalBoxStyles = [styles.modalBox];
        const detail5TextStyle = [styles.detailText];
        if (this.props.alertType === 1 || this.props.alertType === 2 || this.props.alertType === 4 || this.props.alertType === 5) {
            detail5TextStyle.push({ marginHorizontal: 20,lineHeight: 22})
            detail5TextStyle.push({ marginTop: 4, marginBottom: 20 })
        }
        if (!this.props.hasTitle) {
            detail5TextStyle.push({ marginTop: 20 })
        }
        let footer = Platform.OS === 'ios' ? styles.footer : styles.footerAndroid;
        let footerLeft = Platform.OS === 'ios' ? styles.footerLeft : styles.footerAndroidLeft;
        let footerRight = Platform.OS === 'ios' ? styles.footerRight : styles.footerAndroidRight;
        //绘制警告消息弹窗开始

        let titleViewWarn = null;
        let detailTextRadius = [];

        if (!hasTitle) {
            detailTextRadius.push({ borderTopLeftRadius: 10, borderTopRightRadius: 10 });
        }

        if (hasTitle) {
            titleViewWarn = (
                <View style={styles.titleContainer}>
                    <Label text={typeof (this.state.title) != 'undefined' ? this.state.title : title} labelStyle={[styles.titleText, titleTextStyle]} />
                </View>
            )
        }

        let lineAndroidView = null;

        let alertContent = (Platform.OS === 'web') ?
            (
                <View style={styles.container}>
                    {titleViewWarn}
                    <View style={[styles.detailTextContainer, { alignItems: detailTextAlign == 'left' ? 'flex-start' : 'center' }, this.props.detailTextContainerStyle]} onLayout={this._onMiddleLayout}>
                        {this._renderText()}
                    </View>
                    <View style={[styles.footerVertical, this.props.ButtonStyle]}>
                        <TouchableOpacity
                            style={styles.touchableContainer}
                            onClick={() => {
                                this._onClose()
                            }}>
                            <Label text={typeof (this.state.buttonText) != 'undefined' ? this.state.buttonText : buttonText} labelStyle={[buttonTextStyle, { color: messageBoxStyle.footButtonTextColor, fontSize: messageBoxStyle.footButtonFontSize, fontWeight: '400' }]} />
                        </TouchableOpacity>
                    </View>
                </View>
            ) :
            (
                <View style={styles.container}>
                    {titleViewWarn}
                    <View style={[styles.detailTextContainer, { alignItems: detailTextAlign == 'left' ? 'flex-start' : 'center' }, detailTextRadius, this.props.detailTextContainerStyle]} onLayout={this._onMiddleLayout}>
                        {this._renderText()}
                    </View>
                    {lineAndroidView}
                    <View style={[styles.footerVertical, this.props.ButtonStyle]}>
                        <TouchableOpacity
                            style={styles.touchableContainer}
                            onPress={() => {
                                this._onClose()
                            }}>
                            <Label text={typeof (this.state.buttonText) != 'undefined' ? this.state.buttonText : buttonText} labelStyle={[{ color: messageBoxStyle.footButtonTextColor, fontSize: messageBoxStyle.footButtonFontSize, fontWeight: '400' }, buttonTextStyle]} />
                        </TouchableOpacity>
                    </View>
                </View>
            )


        // 绘制警告消息弹窗结束

        //绘制确认消息弹窗开始
        let titleView = null;
        if (hasTitle) {
            titleView = (
                <View style={styles.titleContainer} >
                    <Label text={typeof (this.state.title) != 'undefined' ? this.state.title : title} labelStyle={[styles.titleText, titleTextStyle]} />
                </View>
            );
        }

        let footerDom1 = Platform.OS === 'web' ?
            (
                <View style={footer}>
                    <TouchableOpacity
                        style={[footerLeft, this.props.footerLeftStyle]}
                        onClick={() => {
                            this._onClose()
                        }}>
                        <Label text={typeof (this.state.footerLeftText) != 'undefined' ? this.state.footerLeftText : footerLeftText} labelStyle={[styles.footerLeftText, footerLeftTextStyle]} />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[footerRight, this.props.footerRightStyle]}
                        onClick={() => {
                            this._onConfirm()
                        }}>
                        <Label text={typeof (this.state.footerRightText) != 'undefined' ? this.state.footerRightText : footerRightText} labelStyle={[styles.footerRightText, footerRightTextStyle]} />
                    </TouchableOpacity>
                </View>
            )
            : (
                <View style={footer}>
                    <TouchableOpacity
                        style={[footerLeft, this.props.footerLeftStyle]}
                        onPress={() => {
                            this._onClose()
                        }}>
                        <Label text={typeof (this.state.footerLeftText) != 'undefined' ? this.state.footerLeftText : footerLeftText} labelStyle={[styles.footerLeftText, footerLeftTextStyle]} />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[footerRight, this.props.footerRightStyle]}
                        onPress={() => {
                            this._onConfirm()
                        }}>
                        <Label text={typeof (this.state.footerRightText) != 'undefined' ? this.state.footerRightText : footerRightText} labelStyle={[styles.footerRightText, footerRightTextStyle]} />
                    </TouchableOpacity>
                </View>
            )
        let alertConfirmContent = (
            <View style={styles.container}>
                {titleView}
                {/*部分安卓机上可能出现空隙而出现一条横线，设置marginTop：-1*/}
                <View style={[styles.detailTextContainer, { marginTop: -1, alignItems: detailTextAlign == 'left' ? 'flex-start' : 'center' }, detailTextRadius, this.props.detailTextContainerStyle]} onLayout={this._onMiddleLayout}>
                    {detailComponent ? this.heightFixDetailComponent(detailComponent) : this._renderText()}
                </View>
                {lineAndroidView}
                {footerDom1}
            </View>
        )
        // 绘制确认消息弹窗结束

        // 绘制输入消息弹窗开始
        const footerDom2 = (
            <View style={footer}>
                <TouchableOpacity
                    style={[footerLeft, this.props.footerLeftStyle]}
                    onPress={() => {
                        this._onClose()
                    }}>
                    <Label text={footerLeftText} labelStyle={[styles.footerLeftText, footerLeftTextStyle]} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={[footerRight, this.props.footerRightStyle]}
                    onPress={() => {
                        this.props.destroy();
                        this.setState({
                            visible: false,
                        });
                        type === 'login-password' ? this._inputConfirmLogin(text, password) : this._inputConfirmText(text)
                    }}>
                    <Label text={footerRightText} type={'title'} color={'main'} labelStyle={[styles.footerRightText, footerRightTextStyle]} />
                </TouchableOpacity>
            </View>
        )
        const firstStyle = [styles.inputWrapper1];
        const lastStyle = [styles.inputWrapper2];
        if (type === 'login-password') {
            firstStyle.push(styles.inputFirst);
            lastStyle.push(styles.inputLast);
        } else if (type === 'secure-text') {
            lastStyle.push(styles.inputFirst);
            lastStyle.push(styles.inputLast);
        } else {
            firstStyle.push(styles.inputFirst);
            firstStyle.push(styles.inputLast);
        }
        let alertInputContent = (
            <View style={styles.container}>
                <View style={styles.titleContainer}>
                    <Label text={title} type={'title'} labelStyle={[styles.titleText, titleTextStyle]} />
                </View>
                <View style={styles.detailInput}>
                    {this._renderText()}
                    <View style={styles.inputGroup}>
                        {type !== 'secure-text' && (
                            <View style={firstStyle}>
                                <TextInput
                                    autoFocus
                                    onChangeText={(value) => { this._onChangeText('text', value); }}
                                    value={this.state.text}
                                    style={styles.input}
                                    underlineColorAndroid="transparent"
                                    placeholder={placeholder1 ? placeholder1 : ''}
                                    placeholderTextColor={messageBoxStyle.inputPlaceholderTextColor}
                                />
                            </View>
                        )
                        }
                        {
                            (type === 'secure-text' || type === 'login-password') && (
                                <View style={lastStyle}>
                                    <TextInput
                                        secureTextEntry
                                        onChangeText={(value) => { this._onChangeText('password', value); }}
                                        value={this.state.password}
                                        style={styles.input}
                                        underlineColorAndroid="transparent"
                                        placeholder={placeholder2 ? placeholder2 : ''}
                                        placeholderTextColor={messageBoxStyle.inputPlaceholderTextColor}
                                    />
                                </View>
                            )
                        }
                    </View>
                </View>
                {footerDom2}
            </View>
        )
        // 绘制输入消息弹窗结束

        // 绘制三个按钮竖排弹窗开始
        let alertContent1 = (
            <View style={styles.container}>
                <View style={styles.titleContainer} >
                    <Label text={title} labelStyle={[styles.titleText, titleTextStyle]} />
                </View>
                <View style={[styles.detailTextContainer, { marginTop: -1, alignItems: detailTextAlign == 'left' ? 'flex-start' : 'center' }, this.props.detailTextContainerStyle]} onLayout={this._onMiddleLayout}>
                    {this._renderText()}
                </View>
                <View style={[styles.footerVertical, { height: 50 * 3 }]}>
                    <TouchableOpacity
                        style={styles.touchableContainerNoRadius}
                        onPress={() => {
                            this.setState({
                                visible: false,
                            });
                            this.props.destroy()
                            this.props.onCloseOne()
                        }}>
                        {/* <Label text={buttonTextOne} type={'title'} labelStyle={[styles.buttonText, buttonTextStyle,{color:'#FF7B7B'}]}/> */}
                        <Label text={buttonTextOne} labelStyle={[buttonTextStyle, { color: messageBoxStyle.footRightButtonTextColor, fontSize: messageBoxStyle.footButtonFontSize, fontWeight: '400' }]} />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={styles.touchableContainerNoRadius}
                        onPress={() => {
                            this.setState({
                                visible: false,
                            });
                            this.props.destroy()
                            this.props.onCloseTwo()
                        }}>

                        <Label text={buttonTextTwo} labelStyle={[buttonTextStyle, { color:messageBoxStyle.footButtonTextColor, fontSize: messageBoxStyle.footButtonFontSize, fontWeight: '400' }]} />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.touchableContainer]}
                        onPress={() => {
                            this.setState({
                                visible: false,
                            });
                            this.props.destroy()
                            this.props.onCloseThree()
                        }}>
                        <Label text={buttonTextThree} labelStyle={[buttonTextStyle, { color: messageBoxStyle.footButtonTextColor, fontSize: messageBoxStyle.footButtonFontSize, fontWeight: '400' }]} />
                    </TouchableOpacity>
                </View>
            </View>
        )
        // 绘制三个按钮竖排弹窗结束

        // 绘制协议页弹窗开始
        let footerDomType5 = showType === 'dialog' ? (
            <View style={styles.footerType5}>
                <TouchableOpacity
                    style={[styles.footerRightType5, {borderBottomLeftRadius: 10, borderBottomRightRadius: 10}, this.props.footerRightStyle]}
                    onPress={() => {
                        this._onConfirm()
                    }}>
                    <Label text={footerRightText} labelStyle={[{ color: messageBoxStyle.footRightButtonTextColor, fontSize: messageBoxStyle.footButtonFontSize, fontWeight: '400' }, footerRightTextStyle]} />
                </TouchableOpacity>
            </View>
        ) :
            (
                <View style={styles.footerType5}>
                    <TouchableOpacity
                        style={[styles.footerLeftType5, this.props.footerLeftStyle,{borderBottomLeftRadius: 10}]}
                        onPress={() => {
                            this._onClose()
                        }}>
                        <Label text={footerLeftText} labelStyle={[footerLeftTextStyle, { color: messageBoxStyle.footButtonTextColor, fontSize:  messageBoxStyle.footButtonFontSize, fontWeight: '400' }]} />
                    </TouchableOpacity>
                    <TouchableOpacity
                        style={[styles.footerRightType5, this.props.footerRightStyle,{ borderBottomRightRadius: 10}]}
                        onPress={() => {
                            this._onConfirm()
                        }}>
                        <Label text={footerRightText} labelStyle={[footerRightTextStyle, { color: messageBoxStyle.footRightButtonTextColor, fontSize:  messageBoxStyle.footButtonFontSize, fontWeight: '400' }]} />
                    </TouchableOpacity>
                </View>
            )

        if (!this.props.showConfirm) {
            footerDomType5 = null;
        }

        let detailTextContainerType5 = [styles.detailTextContainerType5];
        if (footerDomType5 == null) {
            detailTextContainerType5.push({
                borderBottomWidth: 0,
                borderBottomLeftRadius: messageBoxStyle.messageBoxRadius,
                borderBottomRightRadius: messageBoxStyle.messageBoxRadius
            })
        }


        let boxhidden ;

        boxhidden = (
            <View style={{position: 'absolute', left: 0 , top: 0, opacity: 0, zIndex: -10}}  onLayout={(e) => { this.props.alertType == 5 && this.onLayout(e.nativeEvent.layout.height)}} >
                <Label text={this.props.detailText} labelStyle={[detail5TextStyle, this.props.detailTextStyle]} />
            </View>
        )

        let alertConfirmContentTyle5 = (showType === 'dialog') ? (
            this.props.detailText?
            <View style={{ flex: 1 }}>
                <View style={styles.titleContainerType5} >
                    <Label text={title} labelStyle={[styles.titleText, titleTextStyle]} />
                </View>
                <View style={[detailTextContainerType5, {paddingBottom: 18, paddingTop: 4, backgroundColor: '#fff'}]}>
                 
                    <View style={[{maxHeight: height * 0.8 - 48 - 65 - 45 - 22}, {position: 'relative'}]}>
                        {
                            (this.state.layoutHeight >= height * 0.8 - 48 - 65 - 45 - 22 - 1) ?
                                <ScrollView style={{ height:  height * 0.8 - 48 - 65 - 45 - 22}}>
                                    <Label text={this.props.detailText} labelStyle={[detail5TextStyle, this.props.detailTextStyle]}/>
                                </ScrollView>
                                : 
                                <Label text={this.props.detailText} labelStyle={[detail5TextStyle, this.props.detailTextStyle]} />
                        }
                        {(this.props.alertType === 5 && !this.state.close) ? boxhidden : null}
                    </View>
                </View>
                {footerDomType5}
                <View style={styles.closeContainer}>
                    <TouchableHighlight
                        //underlayColor={Color.icon.disable}
                        underlayColor={Color.white}
                        activeOpacity={0.7}
                        onPress={() => {
                            this._onClose()
                        }}
                        style={styles.close}>
                        <Image style={styles.image} source={require('../../assets/icon_messageBox_dialog_close.png')} />
                    </TouchableHighlight>
                </View>
            </View>
            :
            <View style={{ flex: 1 }}>
                <View style={styles.titleContainerType5} >
                    <Label text={title} labelStyle={[styles.titleText, titleTextStyle]} />
                </View>
                <View style={[detailTextContainerType5, {flex: 8, paddingBottom: 18, paddingTop: 4, backgroundColor: '#fff', borderBottomLeftRadius: this.props.showConfirm ? 0 : 10, borderBottomRightRadius: this.props.showConfirm ? 0 : 10}]} onLayout={this._onMiddleLayout}>
                    <View style={[{maxHeight: height * 0.8 - 48 - 65 - 45 - 22}, {position: 'relative'}]}>
                        <ScrollView>
                            {this._renderText()}
                        </ScrollView>
                    </View> 
                </View>
                {footerDomType5}
                <View style={styles.closeContainer}>
                    <TouchableHighlight
                        //underlayColor={Color.icon.disable}
                        underlayColor={Color.white}
                        activeOpacity={0.7}
                        onPress={() => {
                            this._onClose()
                        }}
                        style={styles.close}>
                        <Image style={styles.image} source={require('../../assets/icon_messageBox_dialog_close.png')} />
                    </TouchableHighlight>
                </View>
            </View>
        ) :
            (
                this.props.detailText? 
                <View style={{ flex: 1, backgroundColor: '#fff', borderRadius: 10}}>
                    <View style={styles.titleContainerType5} >
                        <Label text={title} labelStyle={[styles.titleText, titleTextStyle]} />
                    </View>
                    <View style={[detailTextContainerType5, {marginBottom: 18, marginTop: 4}]}>
                        <View style={[{maxHeight: height * 0.8 - 48 - 50}, {position: 'relative'}]}>
                            {
                                (this.state.layoutHeight >= height * 0.8 - 48 - 50 - 1 - 22) ?
                                    <ScrollView style={{ height:  height * 0.8 - 48 - 50 - 22}}>
                                        <Label text={this.props.detailText} labelStyle={[detail5TextStyle, this.props.detailTextStyle]}/>
                                    </ScrollView>
                                    : 
                                    <Label text={this.props.detailText} labelStyle={[detail5TextStyle, this.props.detailTextStyle]} />
                            }
                            {(this.props.alertType === 5 && !this.state.close) ? boxhidden : null}
                        </View>
                    </View>
                    {footerDomType5}
                </View>
                :
                <View style={{ flex: 1, backgroundColor: '#fff', borderRadius: 10 }}>
                    <View style={styles.titleContainerType5} >
                        <Label text={title} labelStyle={[styles.titleText, titleTextStyle]} />
                    </View>
                    <View style={[detailTextContainerType5,{flex: 8,marginBottom: 18, marginTop: 4}]} onLayout={this._onMiddleLayout}>
                         <View style={[{maxHeight: height * 0.8 - 48 - 50}, {position: 'relative'}]}> 
                            <ScrollView>
                                {this._renderText()}
                            </ScrollView>    
                           
                        </View>
                    </View>
                    {footerDomType5}
                </View>
            )

        if (Platform.OS === 'web') {
            alertConfirmContentTyle5 = (showType === 'dialog') ? (
                <View style={{ flex: 1 }}>
                    <View style={styles.titleContainerType5} >
                        <Label text={title} labelStyle={[styles.titleText, titleTextStyle]} />
                    </View>
                    <View style={detailTextContainerType5} onLayout={this._onMiddleLayout}>
                        <ScrollView>
                            <View style={{ height: this.state.viewMiddleHeight, width: this.state.viewMiddleWidth, margin: '0 auto' }}>
                                {this._renderText()}
                            </View>
                        </ScrollView>
                    </View>
                    {footerDomType5}
                    <View style={styles.closeContainer}>
                        <TouchableOpacity onClick={this._close} activeOpacity={1}>
                            <View>
                                <TouchableHighlight
                                    underlayColor={Color.white}
                                    activeOpacity={0.7}
                                    onClick={() => {
                                        this._onClose()
                                    }}
                                    style={styles.close}>
                                    <Image style={styles.image} source={require('../../assets/icon_messageBox_dialog_close.png')} />
                                </TouchableHighlight>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            ) :
                (
                    <View style={{ flex: 1 }}>
                        <View style={styles.titleContainerType5} >
                            <Label text={title} labelStyle={[styles.titleText, titleTextStyle]} />
                        </View>
                        <View style={detailTextContainerType5} onLayout={this._onMiddleLayout}>
                            <ScrollView>
                                <View style={{ height: this.state.viewMiddleHeight, width: this.state.viewMiddleWidth, margin: '0 auto' }}>
                                    {this._renderText()}
                                </View>
                            </ScrollView>
                        </View>
                        {footerDomType5}
                    </View>
                )

        }

        let content = null;
        if (alertType === 1) {
            content = alertContent
        }
        if (alertType === 1 && typeof (this.state.footerRightText) != 'undefined') {
            content = alertConfirmContent
        }
        if (alertType === 2) {
            content = alertConfirmContent;
        }
        if (alertType === 3) {
            content = alertInputContent;
        }
        if (alertType === 4) {
            content = alertContent1;
        }
       
        if (alertType === 5) {
            content = alertConfirmContentTyle5
            if(this.props.detailText){
                if(showType == 'dialog'){
                    modalBoxStyles.push({ height: this.state.layoutHeight  + 48 + 65 + 45 + 22 >= Dimensions.get('window').height * 0.8 ? Dimensions.get('window').height * 0.8 : this.state.layoutHeight + 142, borderRadius: 0, backgroundColor: 'transparent' });     
                }else{
                    modalBoxStyles.push({ height: this.state.layoutHeight + 48 + 50 + 22 >= Dimensions.get('window').height * 0.8 ? Dimensions.get('window').height * 0.8 : this.state.layoutHeight + 48 + 50 + 22, borderRadius: 0, backgroundColor: 'transparent' }); 
                }
            }else{

               if(showType == 'dialog'){ 
                   modalBoxStyles.push({ height: this.state.heightView + 48 + 65 + 45 + 22 >= Dimensions.get('window').height * 0.8 ? Dimensions.get('window').height * 0.8 : this.state.heightView + 48 + 65 + 45 + 22, borderRadius: 0 }) 
                } else{
                    modalBoxStyles.push({ height: this.state.heightView  +  48 + 50 + 22 >= Dimensions.get('window').height * 0.8 ? Dimensions.get('window').height * 0.8  : this.state.heightView + 48 + 50 + 22, borderRadius: 0 });
                } 
            }
        }

        modalBoxStyles.push(containerStyle);
        modalBoxStyles.push({ width: boxWidth });
        return (
            <View style={[styles.maskStyle, this._handlerMessagebox(1)]}>
                <TouchableHighlight
                    underlayColor={"rgba(0, 0, 0, 0.4)"}
                    activeOpacity={0}
                    style={styles.maskStyle}
                    onPress={this._maskOnPress}
                    accessible={false}
                ><View /></TouchableHighlight>
                <View style={[modalBoxStyles, this._handlerMessagebox(0)]} pointerEvents="box-none">
                    {content}
                </View>
            </View>
        )

    };
};
MessageBoxContainer.propTypes = {
    boxWidth: PropTypes.number, //消息弹框宽度
    showConfirm: PropTypes.bool,
    htmlStr: PropTypes.string,
    htmlUrl: PropTypes.any,
    showType: PropTypes.oneOf(['normal', 'dialog']),
    alertType: PropTypes.number,
    type: PropTypes.oneOf(['secure-text', 'login-password']),
    title: PropTypes.string,
    titleTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
    detailText: PropTypes.string,
    detailTextAlign: PropTypes.oneOf(['left', 'center']), //描述文本位置，居左或者居中
    detailTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
    buttonText: PropTypes.string,
    buttonTextOne: PropTypes.string,
    buttonTextTwo: PropTypes.string,
    buttonTextThree: PropTypes.string,
    buttonTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
    containerStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
    footerLeftText: PropTypes.string,
    footerLeftTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
    footerRightText: PropTypes.string,
    footerRightTextStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
    onClose: PropTypes.func,
    onCloseOne: PropTypes.func,
    onCloseTwo: PropTypes.func,
    onCloseThree: PropTypes.func,
    onConfirm: PropTypes.func,
    defaultValue1: PropTypes.string,
    defaultValue2: PropTypes.string,
    placeholder1: PropTypes.string,
    placeholder2: PropTypes.string,
    viewHeight: PropTypes.number,
    destroy: PropTypes.func,
    visible: PropTypes.bool,
    detailTextContainerStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object, PropTypes.array]),
    hasTitle: PropTypes.bool,
    detailComponent: PropTypes.any,
    //遮罩点击回调事件
    maskOnPress: PropTypes.func,
    //type=5时传入自定义高度
    heightType:PropTypes.number
};
MessageBoxContainer.defaultProps = {
    boxWidth: 0, // 适配折叠屏在取值处设置默认值
    showConfirm: true,
    onConfirm: () => { },
    onClose: () => { },
    onCloseOne: () => { },
    onCloseTwo: () => { },
    onCloseThree: () => { },
    destroy: () => { },
    PropTypes: 'normal',
    detailTextAlign: 'left',
    alertType: 1,
    buttonText: '确定',
    buttonTextOne: '请给个五星好评吧',
    buttonTextTwo: '我要吐槽',
    buttonTextThree: '我暂时没有想法',
    footerLeftText: '取消',
    footerRightText: '确定',
    type: 'secure-text',
    viewHeight: 0,
    visible: false,
    onBackAndroidFunc: () => { },
    hasTitle: true
   
}


export default MessageBoxContainer;